/**
 * Created by chenxiwei on 2019/5/29.
 */
import React, { forwardRef } from 'react';
import { Button, Modal, Form, Input, Select, message ,DatePicker,Col, Row} from 'antd';
import PropTypes from 'prop-types';
import styles from '@/common/PateoTable/TableList.less';

const FormItem = Form.Item;
const { TextArea } = Input;
const DealerAddForm = forwardRef((props, ref) => {
  const {
    visible, titleType, onCancel, onCreate,
    operate,loading,brandOptions,areaOptions,smallAreaOptions,handleBrandChange,handleAreaChange} = props;
  // const { getFieldDecorator } = form;
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 12 },
      md: { span: 16 },
    },
  };
  return (
    <Modal
      visible={visible}
      title={titleType}
      okText={operate}
      onCancel={onCancel}
      onOk={onCreate}
      confirmLoading={loading}
      width="60%"
    >
      <Form style={{ marginTop: 12 }} ref={ref} onFinish={this.props.onCreate}>
        <Row gutter={24}>
          <Col lg={12} md={12} sm={24}>
            <FormItem
              {...formItemLayout}
              label="经销商名称"
              name="name"
              rules={[{
                required: true, message: '请输入经销商名称',
              }]}
            >
              <Input placeholder="请输入经销商名称" maxLength="128"/>
            </FormItem>
          </Col>
          <Col lg={12} md={12} sm={24}>
            <FormItem
              {...formItemLayout}
              label="经销商代码"
              name="code"
              rules={[{
                required: true, message: '请输入经销商代码',
              }]}
            >
              <Input placeholder="请输入经销商代码" maxLength="32" disabled={titleType === '修改'}/>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col lg={12} md={12} sm={24}>
            <FormItem
              {...formItemLayout}
              label="经销商简称"
              name="shortName"
              rules={[{
                required: true, message: '请输入经销商简称',
              }]}
            >
              <Input placeholder="请输入经销商简称" maxLength="25"/>
            </FormItem>
          </Col>
          <Col lg={12} md={12} sm={24}>
            <FormItem
              {...formItemLayout}
              label="经销商地址"
              name="address"
              rules={[{
                required: true, message: '请输入经销商地址',
              }]}
            >
              <Input placeholder="请输入经销商地址" maxLength="256"/>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col lg={12} md={12} sm={24}>
            <FormItem
              {...formItemLayout}
              label="经销商电话"
              name="phone"
              rules={[{
                required: false, message: '请输入经销商电话',
              }]}
            >
              <Input placeholder="请输入经销商电话" maxLength="50"/>
            </FormItem>
          </Col>
          <Col lg={12} md={12} sm={24}>
            <FormItem
              {...formItemLayout}
              label="经销商状态"
              name="status"
              rules={[{
                required: false, message: '请选择经销商状态',
              }]}
            >
              <Select placeholder="请选择" allowClear getPopupContainer={triggerNode => triggerNode.parentNode}>
                <Select.Option value="1">考察</Select.Option>
                <Select.Option value="2">MOU</Select.Option>
                <Select.Option value="3">保证金</Select.Option>
                <Select.Option value="4">建设</Select.Option>
                <Select.Option value="5">开业准备</Select.Option>
                <Select.Option value="6">开业</Select.Option>
                <Select.Option value="7">撤销</Select.Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col lg={12} md={12} sm={24}>
            <FormItem
              {...formItemLayout}
              label="品牌"
              name="brandId"
              rules={[
                { required: true, message: '请选择品牌' },
              ]}
            >
              <Select placeholder="请选择"  onChange={handleBrandChange} allowClear getPopupContainer={triggerNode => triggerNode.parentNode}>
                {brandOptions}
              </Select>
            </FormItem>
          </Col>
          <Col lg={12} md={12} sm={24}>
            <FormItem
              {...formItemLayout}
              label="大区"
              name="areaId"
              rules={[
                { required: true, message: '请选择大区' },
              ]}
            >
              <Select placeholder="请选择"  onChange={handleAreaChange} allowClear getPopupContainer={triggerNode => triggerNode.parentNode}>
                {areaOptions}
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col lg={12} md={12} sm={24}>
            <FormItem
              {...formItemLayout}
              label="小区"
              name="smallAreaId"
              rules={[
                { required: true, message: '请选择小区' },
              ]}
            >
              <Select placeholder="请选择"  allowClear getPopupContainer={triggerNode => triggerNode.parentNode}>
                {smallAreaOptions}
              </Select>
            </FormItem>
          </Col>
        </Row>
        <FormItem
          {...formItemLayout}
          label=""
          name="sid"
        >
          <Input style={{ display: 'none' }} />
        </FormItem>
      </Form>
    </Modal>
  );
})

class dealerAddModel extends React.Component {
  static contextTypes = {
    authButton: PropTypes.array,
  };

  state = {
    visible: false,
    titleType: '',
    operate: '',
    loading:false,
    brandOptions:[],
    areaOptions:[],
    smallAreaOptions:[],
  };
  componentWillMount(){
  }

  showModal = () => {
    this.setState({
      visible: true,
      titleType: '新增',
      operate: '保存',
    });
    this.handleBrand();
  }
  showModalEdit = (e) => {
    const { form } = this;
    form.setFieldsValue({
      code: e.code,
      name: e.name,
      shortName: e.shortName,
      address: e.address,
      phone:e.phone,
      status:e.status,
      sid: e.sid,
    });
    this.handleBrand();
    if (e.brandId){
      this.handleArea(e.brandId);
      form.setFieldsValue({
        brandId:e.brandId,
      });
    }
    if (e.areaId){
      this.handleSmallArea(e.areaId);
      form.setFieldsValue({
        areaId:e.areaId,
      });
    }
    if (e.smallAreaId){
      form.setFieldsValue({
        smallAreaId:e.smallAreaId,
      });
    }

    this.setState({
      visible: true,
      titleType: '修改',
      operate: '提交',
    });
  }
  handleCancel = () => {
    const { form } = this;
    form.resetFields();
    this.setState({
      visible: false,
      loading:false,
      brandOptions:[],
      areaOptions:[],
      smallAreaOptions:[],
    });
  }

  handleCreate = () => {
    const { form } = this;
    const { dispatch } = this.props;
    const { resetOutterForm } = this.props;

    var url = '/dealer/add';
    var type =  'common/queryPost';
    if(values.sid){
      url = '/dealer/edit?sid='+values.sid;
    }
    this.setState({
      loading:true,
    });
    dispatch({
      type: type,
      payload: { url: url,  ...values },
      callback: (data) => {
        this.setState({
          loading:false,
        });
        if (data.statusCode === '0') {
          message.success('操作成功');
          this.setState({
            visible: false ,
            brandOptions:[],
            areaOptions:[],
            smallAreaOptions:[],
          });
          form.resetFields();
          resetOutterForm();
        } else {
          message.error(data.statusMessage, 3);
          return;
        }
      },
    });
  }
  saveFormRef = (form) => {
    this.form = form;
  };
  handleBrand = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'common/queryListGet',
      payload: { url: '/dealer/brand' },
      callback: (data) => {
        this.setState({ brandOptions: data});
      },
    });
  }
  handleArea = (brandCode) => {
    const { form } = this;
    const {dispatch } = this.props;
    this.setState({
      areaOptions:[],
      smallAreaOptions: [],
    });
    form.resetFields(['areaId','smallAreaId']);
    if(brandCode){
      dispatch({
        type: 'common/queryListGet',
        payload: { url: '/dealer/getareabybrand',brandId:brandCode },
        callback: (data) => {
          if(data) {
            this.setState({areaOptions: data});
          }
        },
      });
    }
  }
  handleSmallArea = (areaId) => {
    const { form } = this;
    const {dispatch } = this.props;
    this.setState({
      smallAreaOptions: [],
    });
    form.resetFields(['smallAreaId']);
    if(areaId){
      dispatch({
        type: 'common/queryListGet',
        payload: { url: '/dealer/getsmallareabyarea',areaId:areaId },
        callback: (data) => {
          if(data) {
            this.setState({smallAreaOptions: data});
          }
        },
      });
    }
  }
  render() {
    const { title } = this.props;
    const brandOptions = (this.state.brandOptions || []).map(item => {
      return (<Option key={item.brandCode}>{item.brandName}</Option>)
    });
    const areaOptions = (this.state.areaOptions || []).map(item => {
      return (<Option key={item.code}>{item.descript}</Option>)
    });
    const smallAreaOptions = (this.state.smallAreaOptions || []).map(item => {
      return (<Option key={item.code}>{item.descript}</Option>)
    });
    const handleBrandChange = (value) => {
      this.handleArea(value);
    };
    const handleAreaChange = (value) => {
      this.handleSmallArea(value);
    };
    const isAuth = this.context.authButton.includes('dealer-add');
    return (
      <div className={styles.tableListForm}>
        {isAuth ? <Button icon={title.icon}  type="primary" onClick={this.showModal}>新增</Button> : ''}
        <DealerAddForm
          ref={this.saveFormRef}
          visible={this.state.visible}
          titleType={this.state.titleType}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
          loading ={this.state.loading}
          // radioOnChange={this.radioOnChange}
          operate={this.state.operate}
          brandOptions={brandOptions}
          areaOptions={areaOptions}
          smallAreaOptions={smallAreaOptions}
          handleBrandChange={handleBrandChange}
          handleAreaChange={handleAreaChange}
        />
      </div>
    );
  }
}

export default dealerAddModel;
